<template>
  <div class="fuse">
    <div class="fuse-left-side">
      <div class="border fuse-side_top" style="height: 2.38rem">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">基本信息</span>
        </div>
        <div class="fuse-main">
          <!-- <div style="display: flex">
            <p class="tit" style="flex: 1">
              核定产能：<span>{{ yieldnew.capacity }}</span
              ><i>万吨</i>
            </p>
            <p class="tit" style="flex: 1">
              设计年产量：<span>{{ yieldnew.yearOutput }}</span
              ><i>万吨</i>
            </p>
          </div>
          <div style="display: flex">
            <p class="tit" style="flex: 1">
              月产量：<span>{{ yieldnew.monthOutput }}</span
              ><i>万吨</i>
            </p>
            <p class="tit" style="flex: 1">
              日产量：<span>{{ yieldnew.dayOutput }}</span
              ><i>吨</i>
            </p>
          </div> -->
          <ul class="yieldlist">
            <li>
              <dl>
                <dt>核定产能</dt>
                <dd>{{ yieldnew.capacity }}<span>万吨</span></dd>
              </dl>
              <dl>
                <dt>设计年产量</dt>
                <dd>{{ yieldnew.yearOutput }}<span>万吨</span></dd>
              </dl>
            </li>
            <li>
              <dl>
                <dt>月产量</dt>
                <dd>{{ yieldnew.monthOutput }}<span>万吨</span></dd>
              </dl>
              <dl>
                <dt>日产量</dt>
                <dd>{{ yieldnew.dayOutput }} <span>吨</span></dd>
              </dl>
            </li>
          </ul>
        </div>
      </div>
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">月度产量统计(单位:万吨)</span>
        </div>
        <div class="fuse-main">
          <echarts :chartData="echartData.rock"></echarts>
        </div>
      </div>
      <div class="border fuse-side_bom">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">时产量统计(单位:吨)</span>
        </div>
        <div class="fuse-main">
          <echarts :chartData="echartData.real"></echarts>
        </div>
      </div>
    </div>
    <div class="fuse-right-side">
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">当天产量统计</span>
        </div>
        <div class="fuse-main">
          <div class="tongji">
            <div class="tongji-left">
              <p>当天产量</p>
              <h1>{{ yieldToday.today }}吨</h1>
            </div>
            <img :src="imgup" class="tongji-middle" v-show="up" />
            <img :src="imgdown" class="tongji-middle" v-show="down" />
            <h2 :class="this.up == true ? 'isup' : 'isdown'">
              {{ yieldToday.percent }}
            </h2>
            <div class="tongji-right">
              <p>昨天产量</p>
              <h1>{{ yieldToday.yestarday }}吨</h1>
            </div>
          </div>
        </div>
      </div>
      <div class="border fuse-side_middle">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img10.png"
            alt=""
          /><span style="vertical-align: middle">近半年产销量统计</span>
        </div>
        <div class="fuse-main">
          <echarts :chartData="echartData.trend"></echarts>
        </div>
      </div>
      <div class="border fuse-side_bom">
        <div class="fuse-title">
          <img
            style="width: 0.4rem; margin-left: -0.1rem; vertical-align: middle"
            src="../../../assets/images/img4.png"
            alt=""
          /><span style="vertical-align: middle">近月超产报警</span>
        </div>
        <div class="fuse-main">
          <div class="overproduction">
            <div class="overproduction-left">
              <p>当月计划产量</p>
              <h1>{{ overProduct.productNum }}万吨</h1>
            </div>
            <div class="overproduction-right">
              <p>当月实际产量</p>
              <h1>{{ overProduct.totalProduct }}万吨</h1>
            </div>
            <div class="overproduction-top">
              <p>上月计划产量</p>
              <h1>{{ overProduct.lastMonthProductNum }}万吨</h1>
            </div>
            <div class="overproduction-bottom">
              <p>上月实际产量</p>
              <h1>{{ overProduct.lastMonthTotalProduct }}万吨</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Echarts from '@/components/Echarts/index.vue'
import * as echarts from 'echarts'
export default {
  components: {
    Echarts
  },
  data() {
    return {
      echartData: {
        rock: {
          xData: [],
          series: []
        },
        real: {
          xData: [],
          series: []
        },
        trend: {
          xData: [],
          series: []
        }
      },
      yieldnew: {},
      imgdown: require('../../../assets/images/img25.png'),
      imgup: require('../../../assets/images/img26.png'),
      up: false,
      down: false,
      yieldToday: [],
      overProduct: []
    }
  },
  methods: {
    getListDetail() {
      // 基本信息
      this.$http.get('/yield/yieldDetail').then(res => {
        if (res.code == 200) {
          this.yieldnew = res.data
        }
      })
      // 月度产量统计
      this.$http.get('/yield/yieldMonth').then(res => {
        if (res.code == 200) {
          this.echartData.rock.xData = res.data.name
          this.echartData.rock.series.push({
            name: '月度产量',
            type: 'line',
            // smooth: true, //是否平滑
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              normal: {
                color: '#6c50f3',
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5
              }
            },
            label: {
              show: true,
              position: 'top',
              textStyle: {
                color: '#6c50f3'
              }
            },
            itemStyle: {
              color: '#6c50f3',
              borderColor: '#fff',
              borderWidth: 3,
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2
            },
            tooltip: {
              show: false
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(108,80,243,0.3)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(108,80,243,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(108,80,243, 0.9)',
                shadowBlur: 20
              }
            },
            data: res.data.omOutputMonth
          })
        }
      })
      // 小时产量统计
      this.$http.get('/yield/yieldHour').then(res => {
        if (res.code == 200) {
          this.echartData.real.xData = res.data.name
          this.echartData.real.series.push({
            name: '时产量',
            type: 'line',
            symbol: 'rect',
            symbolSize: 8,
            itemStyle: {
              color: '#fff',
              borderColor: '#064CC4',
              borderWidth: 2,
              borderType: 'solid'
            },
            lineStyle: {
              color: '#064DC4',
              width: 2
            },
            data: res.data.omOutputMonth
          })
        }
      })
      // 本矿近半年产销量统计
      this.$http.get('/yield/selectHalfYearSaleCount').then(res => {
        if (res.code == 200) {
          this.echartData.trend.xData = res.data.name
          this.echartData.trend.series.push(
            {
              type: 'bar',
              name: '产量',
              data: res.data.omOutputMonth,
              barWidth: '10px',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: 'rgba(0,244,255,1)' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgba(0,77,167,1)' // 100% 处的颜色
                      }
                    ],
                    false
                  ),
                  barBorderRadius: [30, 30, 30, 30],
                  shadowColor: 'rgba(0,160,221,1)',
                  shadowBlur: 4
                }
              }
            },
            {
              type: 'bar',
              name: '销量',
              data: res.data.saleNum,
              barWidth: '10px',
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: '#fccb05'
                    },
                    {
                      offset: 1,
                      color: '#f5804d'
                    }
                  ]),
                  barBorderRadius: [30, 30, 30, 30],
                  shadowColor: 'rgba(0,160,221,1)',
                  shadowBlur: 4
                }
              }
            }
          )
        }
      })
      // 当天产量
      this.$http.get('/yield/yieldToday').then(res => {
        if (res.code == 200) {
          this.yieldToday = res.data
          if (this.yieldToday.isUp == false) {
            this.up = false
            this.down = true
          } else {
            this.up = true
            this.down = false
          }
        }
      })
      // 近月超产
      this.$http.get('yield/overProduct').then(res => {
        if (res.code == 200) {
          this.overProduct = res.data
        }
      })
    }
  },
  created() {
    this.getListDetail()
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.fuse {
  background: #15203a;
  .tit {
    line-height: 0.4rem;
    font-size: 0.14rem;
    margin-left: 0.15rem;
    span {
      font-size: 0.2rem;
      color: #1fcfeb;
      font-weight: 600;
    }
    i {
      font-size: 0.14rem;
      margin-left: 0.05rem;
    }
  }
  .fuse-main {
    box-sizing: border-box;
    padding: 0.1rem;
  }
}
.tongji {
  width: 100%;
  height: 1.4rem;
  background: url(../../../assets/images/img21.png) no-repeat;
  background-size: 100% 100%;
  margin: 0.35rem 0;
  position: relative;
  .tongji-left {
    position: absolute;
    top: 0.5rem;
    left: 0.13rem;
    p {
      font-size: 0.14rem;
    }
    h1 {
      font-size: 0.24rem;
      margin-top: 0.15rem;
      font-weight: 600;
      color: #02b2f5;
    }
  }
  .tongji-right {
    position: absolute;
    top: 0.5rem;
    right: 0.01rem;
    p {
      font-size: 0.14rem;
    }
    h1 {
      font-size: 0.24rem;
      margin-top: 0.15rem;
      font-weight: 600;
      color: #02b2f5;
    }
  }
  .tongji-middle {
    position: absolute;
    width: 0.22rem;
    height: 0.23rem;
    top: 0.4rem;
    left: 48%;
    transform: translate(-50%, 0);
  }
  h2 {
    position: absolute;
    left: 50%;
    top: 0.8rem;
    transform: translate(-50%, 0);
    font-size: 0.16rem;
  }
  .isup {
    color: rgb(44, 255, 12);
  }
  .isdown {
    color: rgb(253, 9, 9);
  }
}
.overproduction {
  width: 80%;
  height: 1.4rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url(../../../assets/images/img80.png) no-repeat;
  background-size: 100% 100%;
  .overproduction-left {
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    h1 {
      font-size: 0.24rem;
      font-weight: 600;
      margin-top: 0.1rem;
      background-image: -webkit-linear-gradient(
        bottom,
        #06eaff,
        #00b4e6,
        #05acff
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .overproduction-right {
    position: absolute;
    top: 0.15rem;
    right: 0.15rem;
    h1 {
      font-size: 0.24rem;
      font-weight: 600;
      margin-top: 0.1rem;
      background-image: -webkit-linear-gradient(
        bottom,
        #06eaff,
        #00b4e6,
        #05acff
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .overproduction-top {
    position: absolute;
    top: 0.85rem;
    left: 0.15rem;
    h1 {
      font-size: 0.24rem;
      font-weight: 600;
      margin-top: 0.1rem;
      background-image: -webkit-linear-gradient(
        bottom,
        #06eaff,
        #00b4e6,
        #05acff
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  .overproduction-bottom {
    position: absolute;
    top: 0.85rem;
    right: 0.15rem;
    h1 {
      font-size: 0.24rem;
      font-weight: 600;
      margin-top: 0.1rem;
      background-image: -webkit-linear-gradient(
        bottom,
        #06eaff,
        #00b4e6,
        #05acff
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
.yieldlist {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95%;
  li:nth-child(1) {
    margin-bottom: 0.2rem;
  }
  li {
    display: flex;
    dl {
      flex: 1;
      background: url(../../../assets/images/img81.png) no-repeat;
      background-size: 100% 100%;
      margin: 0 0.1rem;
      box-sizing: border-box;
      padding: 0.05rem 0 0.05rem 0.2rem;
      dt {
        font-size: 0.14rem;
        height: 0.25rem;
        line-height: 0.25rem;
      }
      dd {
        color: rgb(255, 243, 11);
        font-size: 0.2rem;
        height: 0.3rem;
        line-height: 0.3rem;
        span {
          font-size: 0.12rem;
        }
      }
    }
  }
}
</style>